<nav> elements, each must be given a unique label. The <nav> element for the site's secondary navigation lacks a label to identify its purpose.<nav>. This results in a <nav> containing a <nav>.<nav> containing the set of expandable menu widgets. Remove the aria-label="Site" attribute from the <nav>'s parent <div> and instead apply it to directly to the <nav>.<nav> role from the container for each expandable menu.<div>
<nav aria-label="Secondary navigation">
<ul>
...</ul>
</nav>
</div>aria-label attribute when it is applied to generic elements such as a <div> or a <span>. This is noted in a separate best practices assertion.aria-label is primarily designed to provide an accessible name to an element. aria-label, aria-labelledby, aria-describedby are generally ignored by assistive technologies when they are applied to generic HTML elements that do not provide any meaningful semantic information i.e. <div>, <span>.<div> container for the set of expandable flyout menus (My Account, Billing & Payments, Products & Services, Start, Stop, & Move, Outages, Customer Service) has an aria-label="Site" attribute.<div> container for each expandable menu has an aria-label="Submenu" attribute.<div> is a <nav>.aria-label attribute from each <div> container. Instead apply the aria-label attribute to its descendant <nav>.<div></div>role and aria-* is invalid, consult the W3C Document conformance requirements for use of ARIA attributes in HTML.<img> elements, CSS background images, rendered dynamically on <canvas> elements, SVG path data, etc.), unless the particular way in which text is visually presented is essential and/or cannot be achieved using regular technologies like HTML/SVG/CSS (including, but not limited to, the use of text-shadow, web fonts, gradient backgrounds, rounded corners).<footer> has a direct descendant <footer> element. It is inappropriate to have a footer within a footer. This duplicative use of the footer landmark may cause confuse for screen reader users that make use of landmark navigation.<footer> or elements with role="contentinfo" within <footer>.<footer>
<!-- remove the nested footer<footer role="contentinfo">
...
</footer> -->
<footer><a href> container has an aria-label attribute which provides the control's accessible name. Each link's descendant image has an alt attribute to also provide a text presentation. Given the aria-label attribute, the descendant image can be considered decorative; its alt attribute is unnecessary.alt="" for each badge link. This will ensure that the image is not announced by assistive technologies. When an image is indicated as decorative through the alt="" attribute, there's no possible benefit to doubling-up with the aria-hidden attribute. Remove the unnecessary aria-hidden attribute from the <img>.<a href="https://itunes.apple.com/us/app/duke-energy/id1325217974?mt=8" target="_blank" aria-label="Download on the App Store" ></a>18pt / 24px, or bold and at least 14pt / 18.5px), the contrast ratio must be at least 3:1.lang attribute on the most appropriate container/element, and set it to the value of the appropriate language code.lang attribute to specify that it is a different language than the page's primary language.<html>'s lang attribute shifts to lang="es-US" to specify the page is in (US) Spanish. The "English" button (to shift back to English version) lacks a lang="en" attribute to specify that it is a different language than the page's primary language, Spanish. Production site is out of scope for this audit.lang attribute must also be used to identify chunks of text in a language that is different from the document's primary language.lang="es" to the button with name, "Español".lang="..." attribute with appropriate language code<html lang="en">
<body>
...
<button lang="es">Español</button>
<button>Sign In</button>
</body>
</html>lang="en" to the button with name, "English".lang="..." attribute with appropriate language code<html lang="es-US">
<body>
...
<button lang="en">English</button>
<button>Iniciar sesión</button>
</body>
</html><button> element that triggers a pop-up menu has an aria-haspopup="true" attribute to indicate to assistive technologies that the button has an associated menu.</button>aria-label="menu" attribute. The name does not indicate the menu's primary purpose.aria-label attribute to be more descriptive of the button's purpose e.g. note which menu is being opened. "Open full site navigation" is suggested.</button>role="dialog" to the <div> container for the navigation menu. Then set focus to this element with role="dialog". To achieve this, make sure that the <div> element with role="dialog" can be programmatically focused (with the JavaScript focus() method) by setting tabindex="-1" on the element.role="dialog" to indicate that it is a dialog.dialog to the element containing the side navigation menu and the close button.aria-labelledby reference to the element containing the title text (ideally an <h2>) to provide an accessible name. For dialogs without a visible title, use aria-label to provide an accessible name. The side navigation does not currently have an element that functions as a title. Therefore, apply aria-label to the element with role="dialog".role="dialog" or to the <nav> within the dialog. Apply tabindex="-1" to the element serving as the focus target. This is further discussed in a separate 2.4.3 assertion.aria-hidden="true" to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the aria-hidden attribute from page content when the dialog is closed.<html>
<body>
<div class="dimmed-overlay" aria-hidden="true">
<main>
...
</main>
</div>
<div role="dialog" aria-label="Navigation panel">
<nav aria-label="Main navigation" tabindex="-1">
...
</nav>
</div>
</body>
</html>aria-label is primarily designed to provide an accessible name to an interactive element or elements that act as landmarks. aria-label, aria-labelledby, aria-describedby are generally ignored by assistive technologies when they are applied to generic HTML elements which do not have an interactive role e.g. button, link, input.<div> container for the side navigational panel has aria-label="Side panel" attributearia-label="Side panel" attribute from the <div> within the <nav>.role and aria-* is invalid, consult the W3C Document conformance requirements for use of ARIA attributes in HTML..content { width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css"><iframe> with the label "YouTube video player". This title does not let users know which video is in the <iframe>. Screen reader users do not have enough information to know whether or not they should enter the <iframe> content.title for <iframe> elements when they contain content for a user.<iframe> elements that do not display content to users (e.g. it is used for programmatic reasons), take the following steps: Use CSS display:none or the hidden attribute<iframe> is not intended to be read.iframe.hidden {
display:none;
}aria-hidden="true' to hide the <svg> from assistive technologies. Also add focusable="false" to the <svg> element to prevent unnecessary tab stops.<a href="https://desitecoredev92-cd.azureedge.net/_/media/pdfs/our-company/ash-management/212492-asheville-3q21-monitoring-results.pdf?la=en&rev=009ac748bbac49149c7676ac52d343f7">
...
</svg>
</a><tbody> element is improperly nested within the <table> element (after the <tfoot> element).<table> element (or an element with a table role for ARIA based tables). Note that the grid role is reserved for a widget that uses most of the same roles within it (identified below) but triggers a different interaction mode for screen reader users.presentation or none role.<caption> element to label the table. For ARIA based tables, use an ARIA labeling method such as aria-labelledby.<tr> element for each row, or the row role for rows in ARIA based tables.<th> element for row and column headers. To indicate what dimension the header applies to, the scope=col and scope=row attributes for row headers are implied by user agents assistive technology so are generally not needed. For ARIA based tables, use the columnheader and rowheader roles.<td> element for each cell (or an element with a cell role for ARIA based tables, gridcell if using the grid role).<table> element, also ensure:role="status" on an element within the <caption> element.<caption> element with status update when table is sorted<table>
<caption>News and Resources <span role="status">sorted by title ascending</span></caption>
...
</table>alt="". This will ensure that the image is not announced by assistive technologies.<th> elements. Uses headings instead.<caption> element to label the table. For ARIA based tables, use an ARIA labeling method such as aria-labelledby.<tr> element for each row, or the row role for rows in ARIA based tables.<th> element for row and column headers. To indicate what dimension the header applies to, the scope=col and scope=row attributes for row headers are implied by user agents assistive technology so are generally not needed. For ARIA based tables, use the columnheader and rowheader roles.<td> element for each cell (or an element with a cell role for ARIA based tables, gridcell if using the grid role).text-transform to transform the text to uppercase.<table>
<caption>Contact Information</caption>
<tr>
<td></td>
<th>Name</th>
<th>Phone#</th>
<th>Fax#</th>
<th>City</th>
</tr>
<tr>
<td>1.</td>
<th>Joel Garner</th>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th>Clive Lloyd</th>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr>
<tr>
<td>3.</td>
<th>Gordon Greenidge</th>
<td>281-564-6720</td>
<td>281-511-6600</td>
<td>Houston</td>
</tr>
</table></div></div></div>
</div>aria-pressed attribute to each video tile button. Toggle the button to reflect whether that video is selected.aria-pressed attribute.<button aria-pressed="true" aria label="Parental leave - Maria">
<img src="..." alt="">
</button>aria-live="polite", role="status", aria-atomic="true" to a visually hidden <span>. When a video is selected, update this live region to describe/summarize the change in page i.e. "Parental leave - Maria video selected".<span aria-live="polite" role="status">Parental leave - Maria video selected</span>alt attribute. The alt attribute indicates that the text describing its image i.g. "Parental Leave - Chris Bethany Mosteller image". This information is unnecessary; the text alternative is meant to describe the control's purpose. Superfluous information in the text alternative increase the page noise and make it harder to understand a control's purpose.alt attribute. The text alternative could be further improved by noting that it is a video.<button></button><select> element has a label that is visually hidden until the user selects a value. The purpose of the control may not be clear to users.<h3>). This can be confusing for users, especially assistive technology users who navigate the page by heading.alt="image" attribute. This extra "page noise" can cause confusion for screen reader users. Screen reader users will wonder whether the image is actually informative and its information is not adequately announced to them.alt="". This will ensure that the image is not announced by assistive technologies.title attribute with a long, incomprehensible string sitecore:item:InternalLinkTreeview_AC99B8D34494492B9AFA2BD36DF3DDC6, that resembles a file name, as its value. When focus is set to the link, screen readers announce this title attribute as part of the link's accessible name/description.title attribute.<a href="/our-company/about-us/awards">
...
</a>role="tab" has has an aria-label attribute which provides the control's accessible name. Each tab's descendant image has an alt attribute which has a redundant text alternative e.g. alt="icon". Given the aria-label attribute on the image's functional container, the element with role="tab", the descendant image can be considered decorative; its alt attribute is unnecessary.alt="" for the image within each tab. This will ensure that the image is not announced by assistive technologies. When an image is indicated as decorative through the alt="" attribute, there's no possible benefit to doubling-up with the aria-hidden attribute. Remove the unnecessary aria-hidden attribute from the <img>.<button aria-controls="panel-site-requirements" aria-selected="false" role="tab" tabindex="-1" type="button">
<img alt="">
<span>Site Requirements</span>
</button>alt="chart" attribute.alt="patterned background for duke Energy grant notification copy" attribute.alt="". This will ensure that the image is not announced by assistive technologies.alt="". This will ensure that the image is not announced by assistive technologies.hidden attribute or CSS display:none, or add text and ensure it is available to all users.<p>... Please view our <a href="http://www.prizelabs.com/termsandconditions/" target="_blank">complete terms and conditions</a>. ....</p>alt="image" attribute. This can cause confusion for screen reader users.alt="". This will ensure that the image is not announced by assistive technologies.aria-expanded attribute to indicate whether the content it controls is expanded or collapsed. When the aria-expanded attribute is toggled, it triggers an announcement to assistive technology. This is positive behavior. The label also switches between "Show More" and "Show less". As a rule of thumb, one should not change an ARIA property and the label together. If the label changes, the button has already changed state in a sense. However, a change in label alone does not trigger an announcement to assistive technology.<p>These products or services are not part of the regulated utility services offered by Duke Energy Carolinas ("DEC") and ...
</p><img> is the sole element within the button to close the feedback aside. The image is missing a text alternative. As a result, the control, has no text representation that could provide an accessible name.<div> but has no text.<img> elements that need to contribute content to the accessible name of a link or button, apply an alt attribute with a value briefly describing the link target/button action and including any text displayed in the image.alt attribute:<button></button>aria-label attribute can be applied to the functional container. Given the aria-label attribute provides an accessible name, the descendant image must be indicated as decorative.aria-label attribute:</button>em-based container and font sizes. Setting the size of containers using em units means that the container will adapt in size to reflect any changes in text size within those containers. In terms of text resizing, em units are more robust than px units, particularly when using Internet Explorer, which won't resize text that has been set using absolute measurements.<div> which has an inappropriate role="main" attribute. This element with role="main" which contains most of the widget's content. A page can only have one <main> landmark.<main><main> landmark and instead use a generic <div> as a container.<iframe> lacking a label.title for <iframe> elements when they contain content for a user such as the feedback panel.<iframe> elementdoes not display content to users (e.g. it is used for programmatic reasons), take the following steps: Use CSS display:none or the hidden attribute<iframe> is not intended to be read.iframe.hidden { display:none; }display: none or visibility: hidden to the widget's container.<div> element. Besides lacking an accessible name, the control also lacks the appropriate button role. This is discussed in a separate 4.1.2 assertion.<div>. It lacks accessible name, role, and state information. There are numerous steps which must be undertaken besides providing an accessible name.<button> or apply role="button"alt attribute to the descendant <img>. Alternatively, when an image is the sole element within an interactive element, i.e. a button or a link, apply aria-label attribute to the functional container.<div> and does not convey the appropriate semantic information.<span>.<button> instead of coercing a generic <div> or <span> into a custom button. Native HTML comes with accessibility built into the element and does not require functionality to be rebuilt.role="button" on the generic <div> or <span>.tabindex="0".button.<div> with a CSS-generated background image. The image does not have a text alternative. The control is a generic <div> element and does not expose a button role. Screen readers mostly ignore the control. The control has a tabindex="0" attribute. When the control receives focus, screen readers either announce "clickable" or make no announcement at all.<button>. If this is not possible, apply role="button" to the control. ARIA role attributes can be used to provide semantics to generic elements.aria-label="Feedback form" to the control. Visually hidden text within the button could also be used.aria-expanded attribute to the control to reflect whether the content it controls is expanded or collapsed.</button><img> elements, CSS background images, rendered dynamically on <canvas> elements, SVG path data, etc.), unless the particular way in which text is visually presented is essential and/or cannot be achieved using regular technologies like HTML/SVG/CSS (including, but not limited to, the use of text-shadow, web fonts, gradient backgrounds, rounded corners).<div> element. Besides lacking an accessible name, the control also lacks the appropriate button role and state information to indicate whether the content it controls is expanded or collapsed. This is discussed in a separate 4.1.2 assertion.<div>. It lacks accessible name, role, and state information. There are numerous steps which must be undertaken besides providing an accessible name.<button> or apply role="button"aria-expanded attribute to the control and toggle its value to reflect whether the content it controls is expanded or collapsed.aria-label attribute to the functional container.<span>Feedback</span><div>. The control to reveal the disclosure content is not exposed as a button.aria-expandedaria-label to the functional container.<button> or at least apply role="button" to the controlaria-expanded attribute to the control and toggle its value to reflect whether the content it controls is collapsed or expanded.<button aria-expanded="false">
<span>Feedback</span>
</button>aria-hidden="true" is applied to the feedback aside's container. However, ARIA only changes the announcement to screen readers and does not affect the functionality for any other user group. ARIA does not prevent an element from receiving keyboard focus.aria-hidden="true" attribute on the feedback aside container, when it is collapsed and apply tabindex="-1" to each focusable element within the container.display: none or visibility: hidden to the widget's container.aria-hidden="true" to the widget's container and tabindex="-1" attribute to all focusable elements within the widget, when it is visually hidden.<svg> image without a text alternative. Blind and low vision users will not have the same immediate understanding that the form has submitted successfully.<title> element to provide a text alternative that's appropriate for the context. To ensure support in assistive technologies, provide role="img" and aria-labelledby attributes in the <svg> element. To ensure that <svg> elements do not receive keyboard focus, add focusable="false"....
</svg><dl>)for this data.<dl>
<dt>If contact by phone is your preference, what time of day is best?</dt>
<dd>Daytime</dd>
</dl><ul>
<li>Duke Energy <b>Carolinas</b> - <a href="..." target="_blank">Gas Line Repair Program</a> (<a href="..." target="_blank">En Español</a>)</li>
<li>Duke Energy <b>Indiana</b> - <a href="..." title="DE Indiana Gas Line Repair Program" target="_blank">Gas Line Repair Program</a> (<a href="..." target="_blank">En Español</a>)</li>
<li>Duke Energy <b>Progress</b> - <a href="..." title="DE Progress Gas Line Repair Program" target="_blank">Gas Line Repair Program</a> (<a href="..." target="_blank">En Español</a></li>
</ul><fieldset> element with an empty <legend> element. This is unnecessary and could cause confusion. Remove these elements.placeholder attribute.placeholder attribute will generally be exposed to assistive technologies, so is announced by screen readers. But for other user groups, relying on placeholder text on its own for instructions is a problematic approach. Issues include:<textarea> element. Associate this instruction text to the <textarea> by using the aria-describedby attribute.id value.<textarea> element an aria-describedby attribute with a value that matches the value of the id in the previous step.<label ... for="Comments">Comments</label>(required) or an asterisk _ in the label of the fieldaria-hidden="true" attribute to ensure that screen readers do not announce the ambiguous "star" text when the associated field receives focus.aria-required attribute to the <input> and set its value to true. This will ensure that the <input> is exposed to assistive technologies as a required field, and thus screen readers will announce this fact to their users (e.g. by announcing "required" after announcing the label and any contents within the field).<label for="employeeName">Employee <span aria-hidden="true">(required)</span></label><form> <p>Fields with an asterisk _ are required</p>
...
<label for="employeeName">Employee *</label>...
</form>aria-invalid="true" on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the aria-invalid attribute or set it to false.<label for="address">Address</label>aria-describedby to associate the error message with the form field. Once the field is valid, remove the error message.aria-describedby to point to an error message<label for="email">Email</label>autocomplete attribute...
<label for="passwordId">Password</label>aria-describedby attribute to the form control which points to an id on the error message element. When the form is submitted, programmatically shift keyboard focus to the first field in error.<label for="address">Address</label>
<input type="text" id="address" aria-invalid="true" aria-describedby="address-error">
<span id="address-error">Error: please enter a valid address</span><svg> image without a text alternative. Blind and low vision users will not know that this is a completed step.<title> element to provide a text alternative that's appropriate for the context. To ensure support in assistive technologies, provide role="img" and aria-labelledby attributes in the <svg> element.<title> element, role="img", and the aria-labelledby attribute (Simplified code)...
</svg>.content { width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css">id attribute values. Specifically, the check marks for complete steps all contain <path> elements with the same id attribute value: "check_svg__a".id="..." attribute values are unique for the page.<ol> in place of the unordered list, <ul>.<li class="...">
...
<div class="..." style="...">Applicant Information</div>
</li>
...<div class="...">
Applicant Information
<span class="visually-hidden">Current Step</span>
</div>tabindex="-1" to the <div> that contains this text. This will ensure that it can receive keyboard focus across browsers.<div tabindex="-1" class="...">
Schedule
<span class="visually-hidden">Current Step</span>
</div>.content { width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css">grid features rather than one. The date picker is also missing dialog semantics.aria-label attribute. This is misleading and can result in screen reader users assuming they cannot choose a future year.grid calendar feature.aria-label.<input> rather than opening the date picker might input date information incorrectly. For example, someone might expect the date format to be dd/mm/yyyy. This could mean the difference between making an appointment for January 12th, 2023 (01/12/2023) and December 1st, 2021 (12/01/2023).<input> element using the aria-describedby attribute.<input aria-describedby="date-format1">
<span id="date-format1">Date format: mm/dd/yyyy</span><label> itself.<div> elements within the <button> element.id="..." attribute values are unique for the page..content { width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css">
<link rel="stylesheet" media="(min-width:601px)" href="large.css"><h1> to <h6>) to semantically identify headings.<h1> to <h6> elements cannot be used, role="heading" and aria-level attributes can be used. The value of the aria-level attribute must be a number ranging from 1 to 6, indicating the heading's level.<button> element named with the aria-label attribute. Using this aria-label overwrites the entire content of the alert. Screen reader users will not have access to any of the text within the alert. Instead, screen readers will announce the presence of a "toggle" button. Clicking the button does not provide access to the rest of the content.aria-label attribute.aria-label on the button. If you remove the aria-label, screen readers will announce the full text of the button without truncation. There are two problems with this. First, it creates a very long name for the button. Second, expanding the button does not reveal more content for screen reader users. This can be confusing. Screen reader users might assume the button is broken.alt value of the image from "icon alert" to "alert".<h2>
<button aria-expanded="false" aria-controls="alert1" id="alert1btn">
<img src="..." alt="alert">
System maintenance September 25th and 26th
</button>
</h2>
<div id="alert1" role="region" aria-labelledby="alert1btn">From 11 p.m., Saturday, Sept. 5...</div><h4> heading.<h4> elements we would recommend wrapping the text in a <p> tag and using CSS to create the required look and feel.<h4 class="text-xs font-bold uppercase">customer assistance programs</h4><p class="flex-1 mt-8 text-xl text-gray-dark ">Help people in need with your monthly Duke Bill</p>aria-invalid="true" on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the aria-invalid attribute or set it to false.aria-invalid<label for="address">Address</label>aria-describedby to associate the error message with the form field. Once the field is valid, remove the error message.aria-describedby to point to an error message<label for="email">Email</label>autocomplete attributerole="dialog" attribute.aria-labelledby reference to the element containing the title text (usually the <h2>), e.g. "Search" to provide an accessible name.aria-label to provide an accessible name for the dialog.dialog to the search panel container.aria-hidden="true" to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the aria-hidden attribute from page content when the dialog is closed.<nav> serves as the container for the search side panel. This is inappropriate. A navigation region should only contain navigation controls.<nav> as a container. The container for the search results panel must have role="dialog". This is discussed at length in other assertions for this component.<nav> serves as the container for the search side panel. This is inappropriate. A navigation region should only contain navigation controls.<nav> as a container. The container for the search results panel must have role="dialog". This is discussed at length in other assertions for this component.aria-hidden attribute must be used to hide the image completely from assistive technologies. Using aria-hidden means the image will remain visible on the page.focusable="false" to the SVG.aria-hidden attribute...
</svg>em-based container and font sizes. Setting the size of containers using em units means that the container will adapt in size to reflect any changes in text size within those containers. In terms of text resizing, em units are more robust than px units, particularly when using Internet Explorer, which won't resize text that has been set using absolute measurements.aria-hidden="true" on the container element for any non dialog content when the dialog is open<body>
<div`` ``aria-hidden="true">
<main>
...
</main>
</div>\<div role="dialog" class="visible"`` ``aria-labelledby="dialog-title"></div>
</body>role="dialog" to the container.tabindex="-1" to the element with role="dialog".aria-labelledby attribute to the dialog container and reference the top-level heading "Select your location". This requires adding an id to the heading.tabindex of 0. When the user has focus set to the last focusable element and presses TAB, set focus to the first focusable element in the dialog. Similarly, when focus is set to the first focusable element in the dialog and the user presses SHIFT+TAB, set focus to the last focusable element in the dialog.autocomplete attributesrole="dialog" attribute.aria-labelledby reference to the element containing the title text (usually the <h2>) to provide an accessible name. In this case, "Sign in" serves as a title and could be used. Be sure to identify this text as a heading.aria-label to provide an accessible name for the dialog.aria-describedby to reference the element containing the text.dialog to the containing element.<nav> serves as the container for the sign in panel. This is inappropriate. A navigation region should only contain navigation controls.<nav> as a container. The container for the search results panel must have role="dialog". This is discussed at length in other assertions for this component.dialog role.aria-labelledby reference to the element containing the title text (the <h2>) to provide an accessible name.role="dialog" to the containing element.aria-hidden="true" to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the aria-hidden attribute from page content when the dialog is closed.</div>dialog role.aria-labelledby reference to the element containing the title text (the <h2>) to provide an accessible name.aria-describedby to reference the element containing the text.dialog OR alertdialog to the containing element.aria-hidden="true" to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the aria-hidden attribute from page content when the dialog is closed.alt="". This will ensure that the image is not announced by assistive technologies.aria-label attribute. Bear in mind that not all automated translation tools will translate the text in the aria-label attribute.aria-label to provide further contextaria-label, otherwise this would fail SC 2.5.3 Label in Namealt="". This will ensure that the image is not announced by assistive technologies.alt attribute contains a short description. This can cause confusion for screen reader users.alt="". This will ensure that the image is not announced by assistive technologies.:focus style which is more visually evident (such as an explicit dark background, a bold border, or similar).:focus { outline: 2px dotted black; / example values only / }:hover, an initial step can be to "double-up" the CSS selector to also apply to :focus. In the case of the links within Top Tasks, it is suggested to use the controls' hover state - the control bounces up when the mouse hovers it.:hover style to also apply on :focusalt="". This will ensure that the image is not announced by assistive technologies. One of the links, "Request a light repair," also includes a title which repeats the link text. Removing it will make the link announcement less verbose..content { width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css"><a>), but it should be a button (<button>).<button>, <input type="button" ...> or <input type="submit" ...> elements (depending on their specific purpose) for controls acting as buttons, as they're understood correctly by assistive technologies.<button> element, ensure that at least the appropriate programmatic role="button" is exposed to assistive technologies. In addition, ensure that the control can be operated like a regular <button> and can be activated using both ENTER and SPACE keys (this will potentially require a small change to the current JavaScript behavior).role="button" and the presence of aria-hidden.aria-labelledby reference to the element containing the title text (ideally an <h2>) to provide an accessible name.aria-label to provide an accessible name.dialog to the containing element.aria-hidden="true" to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the aria-hidden attribute from page content when the dialog is closed.role="button" from all elements that are not buttons.aria-hidden from the dialog.<iframe> elements that contain videos are titled "YouTube video player." This doesn't give screen reader users any information about which video is within the <iframe>.title for <iframe> elements when they contain content for a user.<a href="...">Loan sale announcement (PDF, 11KB)</a>.content { width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css"><ul>, and <li> elements.<ul>
<li>Read <a href="..." target="_blank">2021 Terms and Conditions</a></li>
<li>Read about <a href="..." target="_blank">2021 NC Solar Rebate Program</a></li>
<li><a href="..." target="_blank">2021 Solar Rebate Rider SRR</a></li>
<li><a href="...">Learn more about solar rebates for your business</a></li>
</ul>alt="". This will ensure that the image is not announced by assistive technologies..content { width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css"><svg> image(s) is not described adequately. Blind and low vision users will not be able to understand the image(s).<svg> image requires a more detailed plain text description, you may use the SVG <desc> element in conjunction with the aria-describedby attribute.<desc> element and the aria-describedby attribute<svg version="1.1" role="img" aria-labelledby="logo-title"<title id="logo-title">HTML5 Logo</title><polygon points="107.644..." fill="#E44D26"/>
...
</svg><title> element to provide a text alternative that's appropriate for the context. To ensure support in assistive technologies, provide role="img" and aria-labelledby attributes in the <svg> element.<desc> element provides an accessible description for the SVG image. It is a way of providing more detailed information about the image than the <title> element allows on its own.aria-describedby attribute re-enforces the connection between the <svg> and <desc> elements. It ensures the descriptive information is available, even in browsers where accessibility support for SVG is limited.alt="". This will ensure that the image is not announced by assistive technologies..content {
width: 90%; }<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="(max-width:320px)" href="small.css">
<link rel="stylesheet" media="(max-width:600px)" href="medium.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css">focusin event handler for the entire page.window.scrollBy method to scroll it into view.<h1> to <h6>) to semantically identify headings (after adding the alternative text, per another assertion).<h1> to <h6> elements cannot be used, role="heading" and aria-level attributes can be used. The value of the aria-level attribute must be a number ranging from 1 to 6, indicating the heading's level.group or region role. In addition, add aria-roledescription="carousel" to the container.aria-labelledby (if there already is a visible heading or label), or aria-label (if there is no visible label).role="group" and aria-roledescription="slide".<span> within the button to close the email sign up widget.<button aria-label="close">
<span>@ Sign Up Now</span>
</button><h1> to <h6>) to semantically identify headings (after adding the alternative text, per another assertion).<h1> to <h6> elements cannot be used, role="heading" and aria-level attributes can be used. The value of the aria-level attribute must be a number ranging from 1 to 6, indicating the heading's level.<button>.<h2>@ Sign Up Now</h2>
<button`` ``aria-label="close @ Sign Up Now">
<span>@ Sign Up Now</span>
</button>aria-hidden="true" on the container element for any non dialog content when the dialog is open<body>
<div`` ``aria-hidden="true">
<main>
...
</main>
</div><div role="dialog" class="visible"`` ``aria-labelledby="dialog-title">
<h2`` ``id="dialog-title">@ Sign Up Now</h2>
</div>
</body>role="dialog" to the container.tabindex="-1" to the element with role="dialog".aria-labelledby attribute to the dialog container and reference the top-level heading "Select your location". This requires adding an id to the heading.href), form input elements, buttons, and any element with a tabindex of 0. When the user has focus set to the last focusable element and presses TAB, set focus to the first focusable element in the dialog. Similarly, when focus is set to the first focusable element in the dialog and the user presses Shift+TAB, set focus to the last focusable element in the dialog.<input> for an email address and the <select> for U.S. state lack accessible names. Each form control has an associated <label> but the <label> is hidden using visibility: hidden. As a result, screen readers cannot derive an accessible name from the <label>. For example, when focus is set to the <select>, NVDA announces the currently selected option and the form's <label>, "State", which would be an appropriate accessible name, is not announced.visibility: hidden from each form control's <label>. Instead, make each <label> into an always visible label.<label for="form-email">Email Address</label>
<input type="email" value id="form-email">autocomplete attributesautocomplete attribute<label for="form-email">Email Address</label>...
<label for="form-state">State</label></select>aria-describedby attribute to each form control and reference the id for the form control's error message. This requires adding an id to each error message.<label for="form-email" class="form-label">Email Address</label><label>. They have text, "Email Address" and "State", that could provide an appropriate accessible name for the form control. However, each <label> is hidden using display: none, and so, some screen readers do not announce the <label>. For example, NVDA announces the placeholder text, "Email address" for the <input> and the currently selected option for the <select>. This lack of an accessible name is discussed in a separate 4.1.2 assertion.<label> always visible.role="dialog" attribute.aria-labelledby reference to the element containing the title text (usually the <h2>) to provide an accessible name. In this case, "@ Sign Up Now" serves as a title and could be used. Be sure to identify this text as a heading.aria-label to provide an accessible name for the dialog.aria-describedby to reference the element containing the text.dialog OR alertdialog to the containing element.aria-hidden attribute which toggles to reflect whether the widget is displayed or hidden. When the widget is displayed, the container has an aria-hidden="false" attribute which could be problematic for screen reader users.aria-hidden attribute as a Boolean attribute similar to the checked or required attribute, where the presence of the attribute alone, regardless of its value, is evaluated as true. In other words, browsers will interpret aria-hidden="<any phrase>" as true. As a a result, the widget could be hidden to screen reader users when it is displayed.aria-hidden to display:none):aria-hidden="true" where content/elements need to be hidden to assistive technologyaria-hidden attribute where content/elements are to be made available to assistive technology, rather than set it as aria-hidden="false"aria-hidden attribute must be used to hide the image completely from assistive technologies. Using aria-hidden means the image will remain visible on the page.aria-hidden attribute<button>...
</svg>
<span>North Carolina</span>
</button><fieldset> element. Next, provide the group a label using the <legend> element. Note that a <legend> element must appear as the first child element of the <fieldset>.<fieldset> and <legend> elements, an ARIA role="group" may be specified on the containing element, and an aria-labelledby may be used to reference the group's visible label. If a grouping does not have a visible label, then add one.aria-labelledby<p>Our site is customized based on your location. We'll remember your selection for future visits.</p><li><button>North Carolina</button></li>
<li><button>South Carolina</button></li>
<li><button>Ohio</button></li>
<li><button>Kentucky</button></li>
<li><button>Indiana</button></li>
<li><button>Florida</button></li>
</ul>role="dialog" to the container. To accommodate legacy browsers, apply tabindex="-1" to the element with role="dialog". Also apply aria-labelledby attribute to the dialog container and reference the top-level heading "Select your location". This requires adding an id to the heading.dialog to the containing element.aria-labelledby reference to the element containing the title text (ideally an <h2>) to provide an accessible name. The heading "Select your location" can be used as the visual title. This requires adding an id to the heading. If it is not possible to use the heading, then an aria-label attribute can be applied to the element with role="dialog" to provide an accessible name.aria-hidden="true" to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the aria-hidden attribute from page content when the dialog is closed.alt="". This will ensure that the image is not announced by assistive technologies.alt="". This will ensure that the image is not announced by assistive technologies.aria-hidden attribute must be used to hide the image completely from assistive technologies. Using aria-hidden means the image will remain visible on the page.focusable="false" to the SVG.aria-hidden attribute...
</svg>aria-live="polite", aria-atomic="true", and role="status" to the container for this text.<span>Search Results</span>
<span>1 - 10 of 849 results</span>
</div>aria-live="polite", aria-atomic="true", and role="status" to the container for this text.<span aria-live="polite" role="status" aria-atomic="true">39 Results Found</span>